<script setup>
import {toRefs,ref,onUpdated} from "vue"
import {View} from "pack-vditor"

const props = defineProps(['main','content','loading',"time"])
const {loading,content,time} = toRefs(props)

const show = ref(false)
const contentRef = ref();


onUpdated(() => {
    // console.log('...........',loading.value,content.value)
})
</script>

<template>
    <div class="overflow-hidden relative bg-#93d2f333 rd-4  text-10 c-#666">
        <!-- header -->
        <div class="flex justify-between items-center bg-#93d2f3 p-4 text-10 fw-bold relative z-99 cursor-pointer" @click="show = !show">
            <div class="flex items-center gap-10">{{ loading ? '思考中' : '思考结束，耗时' }} {{ time }} <div v-show="loading" class="i-eos-icons:loading"></div></div>
            <div :class="['i-mingcute:right-fill transition-all',show || loading ? '' : 'rotate-90']"  ></div>
        </div>
        <!--  -->
        <div ref="contentRef" :class="['transition-all bg-#ffffff88 overflow-hidden relative z-0 ',show || loading ? 'h-fit p-4' : 'h-0 p-0']">
            <View :value="content"></View>
        </div>
    </div>
</template>